<template>
	<!--底部组件-->
	<div class="footer-bottom">
		<footer :class="[footerClass]">
			<div :class="[ykCoverClass]" @click="ykCover" v-if="$store.state.isYk"></div>
			<form @submit.prevent action="#" v-show="$store.state.clearDom[0].open">
				<textarea id="textarea" :class="[textareaClass]" type="text" v-model="inputValue" @focus="inputFocus"
					@blur="inputBlur" @keyup.13="sendMsg" :placeholder="footerPlaceholder"></textarea>
			</form>
			<div class="dot-box" v-show="isBottomRight" @click="actionSheet('moreOption','')"></div>
			<div class="bottom-right" v-show="isBottomRight">
				<div v-if="shoppingBtnShow" v-show="$store.state.clearDom[0].open" class="shopping-box"
					@click="getShoppingData">
				</div>
				<div v-show="giftIconOpen && $store.state.clearDom[0].open" @click="openGiftPanelHandle"
					class="gift-box"></div>
				<!-- <div v-show="$store.state.clearDom[0].open" @click="sendZan" class="zan-box" id="zanBox">
					<img src="../../../assets/images/lookBack/dianzan-new.png" :class="zanBoxImg" />
					<div class="zan-num" v-if="roomInfo.hdCount">{{roomInfo.hdCount | filerNum(1)}}</div>
				</div> -->
				<div v-show="$store.state.clearDom[0].open" class="zan-box" id="zanBox" @click="sendZan">
					<!-- <img src="../../../assets/images/lookBack/dianzan-new.png" :class="zanBoxImg" />
					<div class="zan-num" v-if="roomInfo.hdCount">{{roomInfo.hdCount | filerNum(1)}}</div> -->
					<ClickLike :roomInfo="roomInfo" ref="clickLike"></ClickLike>
				</div>
			</div>
			<span v-show="!isBottomRight" class="send-btn" :class="[sendClass]" @click="sendMsg">发送</span>
		</footer>
	</div>

</template>

<script>
	import ClickLike from '@/components/ClickLike/ClickLike';
	export default {
		components:{
			ClickLike
		},
		props: {
			roomInfo: String,
			isPublic: Boolean,
			quickMessage: String,
			shoppingDataInfo:Object,
		},
		data() {
			return {
				zanBoxImg: '',
				timer: null,
				footerClass: ['innerFooter'],
				textareaClass: ['outer-input'],
				// footerClass: ['outerFooter'],
				// textareaClass: ['inner-input'],
				isBottomRight: true,
				orderNum: '',
				roomId: this.$route.params.roomid, //房间id
				inputValue: "", //输入框输入内容
				isInputShow: false,
				footerPlaceholder: "说点什么吧...",
				liveType: '', //房间状态 roomStatus  0  1  2  对应 1  2  16
				iconDataArray: [
					require('../../../assets/images/zan/zan1.png'),
					require('../../../assets/images/zan/zan2.png'),
					require('../../../assets/images/zan/zan3.png'),
					require('../../../assets/images/zan/zan4.png'),
					require('../../../assets/images/zan/zan5.png'),
					require('../../../assets/images/zan/zan6.png'),
					require('../../../assets/images/zan/zan7.png'),
					require('../../../assets/images/zan/zan8.png'),
					require('../../../assets/images/zan/zan9.png'),
					require('../../../assets/images/zan/zan10.png'),
					require('../../../assets/images/zan/zan11.gif'),
					require('../../../assets/images/zan/zan12.gif'),
				],
				giftIconOpen: false, //礼物开关
				ykCoverClass: '', //游客覆盖层的长度
				sendZanSwitch: true, //点赞开关
				isSocketConnected: false, //socket是否连上
				isSocketConnectedSecondSwitch: true, //点赞开关
			}
		},
		directives: {
			'mtfocus'(el, binding) { //el真实dom
				el.onfocus = function() {
					console.log(111)
				}
				el.onblur = function() {
					console.log(222)
				}
			}

		},
		computed: {
			shoppingBtnShow (){
			if(this.shoppingDataInfo ?.goods ?.goodsList.length ){
				return true
			}     
			}
		},
		watch: {
			quickMessage() {
				this.inputValue = this.quickMessage;
				this.isBottomRight = false;
				this.footerClass.splice(0, 1, 'outerFooter')
				this.textareaClass.splice(0, 1, 'inner-input')
			},
			//监听底部按钮颜色变化
			inputValue() {
				if (!this.inputValue) {
					this.sendClass = ''
				} else {
					this.sendClass = 'send-red'
				}
			},
		},
		created() {
			this.$addStorageEvent(2, 'hunayuan', 1); //当进入页面时先吧huanyuan值为false
			//console.log(this.roomInfo.roomInfo)
			// isPl  是否允许评论 0 否 1是     plCk 评论审核 0 先发 1 先审后发
			if (this.roomInfo.roomInfo.isPl == '0') { //评论关闭
				this.footerPlaceholder = '评论功能已关闭'
			} else if (this.roomInfo.roomInfo.isPl == '1') { //可以评论

			}
			if (this.roomInfo.roomInfo.roomStatus == '0') { //预告
				this.liveType = '1'
			} else if (this.roomInfo.roomInfo.roomStatus == '1') { //直播
				this.liveType = '2'
			} else if (this.roomInfo.roomInfo.roomStatus == '2') { //关播
				this.liveType = '16'
			};
			if (this.roomInfo.roomInfo.giftOpen == 1) { //送礼物
				this.giftIconOpen = true
				this.ykCoverClass = 'yk-cover'
			} else {
				this.ykCoverClass = 'yk-cover-no-gift'
				this.giftIconOpen = false
			}
		},
		mounted() {
			fun.objBlurFun('textarea'); //ios下键盘弹出点击空白不收起问题;
			// 点赞效果隐藏
			// let _this = this;
			// document.getElementById('zanBox').onclick = function() {
			//   let boomChildList = [];
			//   for (let i = 0; i < _this.iconDataArray.length; i++) {
			//     let temDom = document.createElement('div')
			//     temDom.className = 'demoDom';
			//     temDom.innerHTML = `<img src="${_this.iconDataArray[i]}">`
			//     boomChildList.push(temDom);
			//   }
			//   let boom = new Boom({
			//     particleList: boomChildList,
			//     container: this
			//   });
			//   boom.boom()
			// }
		},
		beforeDestroy() {},
		methods: {
			sendZan(e) {
				const { title, anchor, roomId, roomStatus } = this.roomInfo.roomInfo;
				$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
					page_name: `直播${['预告', '详情'][roomStatus]}页`,
					user_nickname: this.$store.state.userInfo.nickname,
					live_room_id: roomId,
					live_room_name: title,
					live_room_status: ['预告', '直播中'][roomStatus],
					live_room_creator: anchor,
					function_name: '点赞',
				});
				if (e.target.classList.contains("icon-wrap")) return false;
				// 触发动画
				this.$refs.clickLike.triggerAni();
				if (this.$store.state.isYk) {
					let jointUrl = fun.getCurPageUrl('live', this.$route.params.roomid);
					fun.ykDisposeFun(jointUrl)
					return
				} else {
					this.sendZanFun();
				}
    		},
			// sendZanFun() {
			// 	// 触发点赞接口
			// 	this.$refs.clickLike.triggerNum();
			// },
			ykCover() {
			if (this.isPublic) {
				this.$emit('formChildMsg', {
				type: 'isPublicShow',
				data: {
					'Msg': '公开不限制直播间'
				}
				})
				return
			}
			if (this.$store.state.isYk) {
				let jointUrl = fun.getCurPageUrl('live', this.$route.params.roomid);
				fun.ykDisposeFun(jointUrl)
				return
			}
			},
			debounce() { //防抖动画执行
				let _this = this
				return function() {
					if (_this.timer) {
						clearTimeout(_this.timer);
						_this.timer = setTimeout(() => {
							_this.$addStorageEvent(2, 'hunayuan', 0); //判断动画是否改变
						}, 2000);
					} else {
						_this.timer = setTimeout(() => {
							_this.$addStorageEvent(2, 'hunayuan', 0); //判断动画是否改变
						}, 2000);
					}
				}()
			},
			sendZanFun() {
				// this.isSocketConnected = this.$store.state.socketConnected
				// if (this.sendZanSwitch && this.isSocketConnected) { //30秒之内请求接口一次
				// 	this.sendZanSwitch = false;
				// 	setTimeout(() => {
				// 		this.sendZanSwitch = true;
				// 		this.sendPostZan();
				// 	}, 30000);
				// }
				// if (!this.isSocketConnected && this.isSocketConnectedSecondSwitch) {
				// 	console.log('socket未连接，大约点赞3秒之后重新发送消息')
				// 	this.isSocketConnectedSecondSwitch = false;
				// 	setTimeout(() => {
				// 		this.isSocketConnectedSecondSwitch = true;
				// 		this.sendZanFun()
				// 	}, 30000)
				// }
				this.$refs.clickLike.triggerNum();
			},
			// sendZan() {
			// 	// 神策打点（点赞）
			// 	const { title, anchor, roomId, roomStatus } = this.roomInfo.roomInfo;
				// $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
				// 	page_name: `直播${['预告', '详情'][roomStatus]}页`,
				// 	user_nickname: this.$store.state.userInfo.nickname,
				// 	live_room_id: roomId,
				// 	live_room_name: title,
				// 	live_room_status: ['预告', '直播中'][roomStatus],
				// 	live_room_creator: anchor,
				// 	function_name: '点赞',
				// });
			// 	this.zanBoxImg = 'zanBoxImg'; //每次点击给点赞按钮添加一个q弹的效果
			// 	setTimeout(() => {
			// 		this.zanBoxImg = ''; //在0.5秒后再把q弹效果给取消了
			// 	}, 500)
			// 	this.$addStorageEvent(2, 'speed', 0); //点击点赞图片时使canvas动画加快
			// 	this.$addStorageEvent(2, 'hunayuan', true); //判断动画是否改变
			// 	this.debounce();
			// 	if (this.$store.state.isYk) {
			// 		let jointUrl = fun.getCurPageUrl('live', this.$route.params.roomid);
			// 		fun.ykDisposeFun(jointUrl)
			// 		return
			// 	}
			// 	this.sendZanFun();
			// },
			sendPostZan() {
				let params = {
					'type': '1',
					'liveType': this.liveType,
					'anchor': this.roomInfo.roomInfo.anchor,
					'plat': fun.getPlatform(),
					'sceneId': this.roomInfo.roomInfo.sid,
					'roomId': this.roomId,
          'message':''
				}
				this.$http.post("/h5live/speakSend", this.$qs.stringify(params)).then(res => {},
					err => {
						console.log("speakSend err", err);
					}
				);
				
			},
			ykCover() {
				if (this.$store.state.isYk) {
					let jointUrl = fun.getCurPageUrl('live', this.$route.params.roomid);
					fun.ykDisposeFun(jointUrl)
					return
				}
			},
			//更多 弹出面板
			actionSheet(sheet, t) {
				this.$emit("formChildMsg", {
					type: "footerActionSheetOpen",
					data: {
						component: sheet,
						title: t
					}
				})
			},
			openGiftPanelHandle() {
				if (this.$store.state.isYk) {
					fun.ykDisposeFun()
					return
				}
				this.$store.dispatch("showGiftPanelFlag", true)
				this.$store.dispatch("showSendMask", true)
			},
			getShoppingData() { // 商品列表
				this.shopClick()//点击小黄车按钮打点
				this.$emit('formChildMsg', {
					type: 'clickShoppingBtn'
				})
			},
			inputBlur() { //失去焦点
				setTimeout(() => {
					this.textareaClass.splice(0, 1, 'outer-input')
					this.footerClass.splice(0, 1, 'innerFooter')
					this.isBottomRight = true;
				}, 100)

			},
			inputFocus() { //获取焦点
				if (this.roomInfo.roomInfo.isPl == '0') { //评论关闭
					return;
				}
				setTimeout(() => {
					this.isBottomRight = false;
					this.footerClass.splice(0, 1, 'outerFooter')
					this.textareaClass.splice(0, 1, 'inner-input')
				}, 100)
			},
			// 直播提交留言
			sendMsg() {
				// 神策打点（发言）
				const { title, anchor, roomId, roomStatus } = this.roomInfo.roomInfo;
				$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
					page_name: `直播${['预告', '详情'][roomStatus]}页`,
					user_nickname: this.$store.state.userInfo.nickname,
					live_room_id: roomId,
					live_room_name: title,
					live_room_status: ['预告', '直播中'][roomStatus],
					live_room_creator: anchor,
					function_name: '发送留言',
					reply_content: this.inputValue
				});
				this.$parent.quickMessage = "";
				this.inputBlur()
				if (this.roomInfo.roomInfo.isPl == '0') { //评论关闭
					fun.toastMessage("评论功能已关闭", 2000);
					this.inputValue = '';
					return;
				}
				if (this.inputValue.length > 150) {
					fun.toastMessage("留言字数过多，请重新编辑", 2000);
					return
				}
				this.sendDatabaseMsg(this.inputValue)
			},
			sendDatabaseMsg(inputValue) { //消息入库 在im回调之后
				let params = {
					'type': '0',
					'liveType': this.liveType,
					'anchor': this.roomInfo.roomInfo.anchor,
					'message': inputValue,
					'plat': fun.getPlatform(),
					'sceneId': this.roomInfo.roomInfo.sid,
					'roomId': this.roomInfo.roomInfo.roomId
				};
				if (inputValue != "") {
					this.$http.post("/h5live/speakSend", this.$qs.stringify(params))
						.then(
							res => {
								if (res.data.code == "000000") {
									if (this.roomInfo.roomInfo.plCk == "1") { //plCk 评论审核 0 先发 1 先审后发
										fun.toastMessage("已提交，等待审核", 2000)
									}
								} else if (res.data.code == "100003") {
									fun.toastMessage("您已被禁言", 1500)
								} else if (res.data.code == "100008") {
									fun.toastMessage("发言过于频繁，请稍后再发言！", 1500)
								} else {
									fun.toastMessage(res.data.msg, 1500)
								}
							},
							err => {
								console.log(err);
							}
						);
				}
				this.inputValue = ''
			},
			// 点击小黄车打点
			shopClick() {
				const { title, anchor, roomId } = this.roomInfo.roomInfo;
				$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
					page_name: `直播间详情页`,
					user_nickname: this.$store.state.userInfo.nickname,
					live_room_id: roomId,
					live_room_name: title,
					live_room_status: "回看",
					live_room_creator: anchor,
					function_name: '点击小黄车',
				});
			}
		},
		filters: {
			filerNum(type, fixed) {
				if (typeof type == "undefined") {
					return 0
				} else if (type < 10000) {
					return type
				} else {
					return (type / 10000).toFixed(fixed) + "w";
				}
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.outerFooter {
		width: 100%;
		height: 106px;
		padding: 0 20px;
		background: #FFFFFF;
		position: fixed;
		/* 不用fixed以防光标上移 */
		bottom: 0;
		left: 0;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.outer-input {
		width: 100%;
		height: 64px;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 40px;
		flex: 1;
		font-size: 26px;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		padding-left: 30px;
		margin: 0 20px;
		line-height: 70px;
	}

	// 苹果placeholder行高
	.outer-input::-webkit-input-placeholder {
		line-height: 64px;
	}

	.inner-input {
		width: 100%;
		height: 64px;
		background: #F2F2F2;
		border-radius: 23px 0 0 23px;
		font-size: 28px;
		font-weight: 400;
		color: #3A3A3A;
		padding-left: 30px;
		word-wrap: break-word;
		word-break: normal;
		padding-top: 15px;
		line-height: 40px;
	}

	.send-btn {
		width: 130px;
		height: 64px;
		font-size: 28px;
		font-weight: 400;
		color: #333333;
		background: #F2F2F2;
		line-height: 64px;
		text-align: center;
		border-radius: 0 23px 23px 0;
		border-left: 2px solid #E8E8E8;
	}

	.innerFooter {
		width: 100%;
		height: 64px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.footer-bottom {
		width: 100%;
		height: auto;
		position: absolute;
		bottom: 62px;
		left: 0;
		z-index: 10;

		.bottom-right {
			display: flex;
		}
	}

	.yk-cover {
		width: 440px;
		height: 70px;
		background: transparent;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}


	.yk-cover-no-gift {
		width: 540px;
		height: 70px;
		background: transparent;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}


	.send-box {
		width: 100vw;
		height: 106px;
		padding: 0 20px;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.send-box span {
		width: 90px;
		height: 70px;
		font-size: 28px;
		font-weight: 400;
		color: #333333;
		background: #F2F2F2;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 16px;
		white-space: nowrap;
		border-radius: 0 23px 23px 0;
		border-left: 2px solid #E8E8E8;
	}

	.send-box .send-red {
		color: #cc3538;
	}


	// .send-box form {
	//   width: calc(100vh - 130px);
	//   height: 70px;
	// }

	.shopping-box {
		width: 64px;
		height: 64px;
		background: url('../../../assets/images/lookBack/shopping-new.png') no-repeat;
		background-size: 100% 100%;
		color: white;
		font-size: 20px;
		position: relative;
		margin: 0 7.5px;
	}

	.shopping-box span {
		position: absolute;
		top: 22px;
		left: 17px;
		height: 30px;
		width: 46px;
		font-size: 18px;
		font-weight: 500;
		color: #FF0000;
		text-align: center;
		z-index: 2;
	}

	footer form {
		flex: 1;
		display: flex;
	}



	.inner-input::placeholder {
		color: #3A3A3A;
	}

	.dot-box {
		width: 62px;
		height: 62px;
		border-radius: 50%;
		margin: 0 7.5px 0 0;
		background: url('../../../assets/images/lookBack/more-new.png') no-repeat;
		/* background-color:rgba(200, 200, 200, 0.35); */
		background-size: 100% 100%;
	}

	.gift-box {
		width: 62px;
		height: 62px;
		background: url('../../../assets/images/lookBack/gift-new.png') no-repeat;
		background-size: 100% 100%;
		margin: 0 7.5px 0 7.5px;
	}

	.zan-box {
		width: 62px;
		height: 62px;
		/*  background: white;*/
		border-radius: 50%;
		margin: 0 10px 0 7.5px;
		position: relative;
		z-index: 10;
	}

	.zan-box img {
		width: 62px;
		height: 62px;
		user-select:none;
  		-webkit-user-select: none;
  		-moz-user-select: none;
		pointer-events: none;
	}

	.outer-input::placeholder {
		color: #FFFFFF;
	}

	.icon-zan {
		font-size: 70px;
		color: #cc3538;
		margin-top: 3px;
		position: absolute;
	}

	.zan-num {
		/*		width: 80px;*/
		max-width: 80px;
		height: 25px;
		line-height: 25px;
		background: #FF1D1D;
		border-radius: 12px;
		color: white;
		font-size: 18px;
		padding: 1px 8px;
		text-align: center;
		position: absolute;
		left: 75%;
		top: -2px;
		transform: translate(-50%, -50%);
	}

	.zanBoxImg {
		animation: keyNavBottom 0.3s ease-in;
	}

	@keyframes keyNavBottom {
		0% {
			transform: scale(1);
		}

		25% {
			transform: scale(1.1);
		}

		50% {
			transform: scale(0.9);
		}

		75% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}
</style>
